<template>
  <el-card ref="cardRef" class="history-attachments" shadow="always" :style="cardStyle">
    <div slot="header" class="d-flex flex-ju-sb flex-a-c">
      <div>
        <span v-show="unfold" class="bold">相关附件</span>
        <button v-show="!unfold" class="el-icon-s-fold f24 button-empty-style pointer" @click="handleCardPositionToggle"></button>
      </div>

      <button class="el-icon-s-unfold f24 button-empty-style pointer" @click="handleCardPositionToggle"></button>
    </div>
    <!-- <ul v-if="list && list.length"> -->
    <ul v-show="unfold">
      <li v-for="(it, i) of list" :key="i" class="ha-item">
      <!-- <li v-for="(it, i) of [1, 2, 3, 4, 6, 6, 7]" :key="i" class="ellipsis ha-item"> -->
      <!-- <a href="/">111</a> -->
        <a 
          class="ellipsis"
          :title="it.originalFilename"
           target="_blank" 
          :href="fileUrlParse(it.storagePath)" 
          :download="it.originalFilename"
          @click="handleDownload($event, it)"
        >
          {{ it.originalFilename }}
        </a>
      </li>
    </ul>
  </el-card>
</template>

<script>
// utils
import { fileUrlParse, triggerDownload } from '@/utils/file'
export default {
  name: 'HistoryAttachments',

  props: {
    list: {
      type: Array
    }
  },

  data: () => ({
    unfold: true
  }),

  computed: {
    cardStyle() {
      if (this.unfold) {
        return {
          right: '30px'
        }
      }

      let cardWidth = 0
      if (this.$refs.cardRef) {
        cardWidth = this.$refs.cardRef.$el.clientWidth
      }
      return {
        right: -cardWidth + 50 + 'px'
      }
    }
  },

  methods: {
    fileUrlParse,

    handleCardPositionToggle() {
      this.unfold = !this.unfold
    },

    handleDownload(e, item) {
      // console.log(item);
      e.preventDefault()
      triggerDownload(this.fileUrlParse(item.storagePath), item.originalFilename)
    },
  }
}
</script>

<style lang="less">
@import './list.less';
</style>
